<template>
  <div class="sub-right-container" style="display: flex">
    <!-- 项目树 -->
    <div style="position: relative">
      <div ref="treeRef" style="display: flex; min-width: 250px; height: 100%">
        <doc-tree
          ref="mychild"
          @give-code="getCode"
          @on-edit="getWorkEdit"
          @change-show-flag="getChangeShowFlag"
          :edit-name="state.workMonitorName"
        />
      </div>
    </div>

    <!-- 画布 -->
    <div style="width: 100%; height: 100%">
      <div class="flex top">
        <div @click="onSave" class="flex justify-center title">
          <i
            ><el-icon class="mr-1"><collection /></el-icon>
          </i>
          <span>保存</span>
        </div>
        <div @click="onLine" class="flex justify-center title">
          <i
            ><el-icon class="mr-1"><upload-filled /></el-icon> </i
          ><span>上线</span>
        </div>
        <div @click="onMonitior" class="flex justify-center title">
          <i
            ><el-icon class="mr-1"><data-line /></el-icon> </i
          ><span>前往监控</span>
        </div>
        <div @click="onCommitConfig" class="flex justify-center title">
          <i
            ><el-icon class="mr-1"><folder-checked /></el-icon>
          </i>
          <span>立即执行</span>
        </div>
        <div @click="onSetTime" class="flex justify-center title">
          <i
            ><el-icon class="mr-1"><video-pause /></el-icon>
          </i>
          <span>定时管理</span>
        </div>
      </div>

      <div style="width: 100%; height: 100%">
        <filiation-graph
          :code="state.code"
          :project-code="state.projectCode"
          :work-name="state.workName"
          @give-state="getState"
          ref="filiateGraph"
        />
      </div>
    </div>
  </div>
  <!-- 定时管理弹窗 -->
  <index
    :visible="state.visible"
    @close="closeModal"
    :project-code="state.projectCode"
    :code="state.code"
  />
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  ref,
  onMounted,
  reactive,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import DocTree from "../Manage/components/DocTree.vue";
import { ElMessage } from "element-plus";
import FiliationGraph from "./components/filiationGraph.vue";
import Index from "./components/index.vue";
import {
  Collection,
  UploadFilled,
  DataLine,
  FolderChecked,
  VideoPause,
} from "@element-plus/icons-vue";

export default defineComponent({
  name: "WorkManage",
  components: {
    DocTree,
    FiliationGraph,
    Index,
    UploadFilled,
    Collection,
    DataLine,
    FolderChecked,
    VideoPause,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      code: "",
      projectCode: "",
      releaseState: "",
      visible: false,
      taskDefinition: [],
      taskRelation: [],
      workName: "",
      motif: "",
      workCode: "",
      workProjectCode: "",
      workMonitorName: "",
      releaseState: "",
      ShowFlag: true,
    });
    const treeRef = ref();
    //获取 tree树的变化
    const getChangeShowFlag = (e) => {
      state.ShowFlag = !e;
      if (e) {
        treeRef.value.style = "min-width:0px";
        treeRef.value.style = "position:absolute;left:0;top:0;z-index:1000;";
      } else {
        treeRef.value.style = "min-width:250px";
      }
    };
    //获取节点树节点编码，作业名、主题名
    const getCode = (e, i, j, k) => {
      state.code = e;
      state.projectCode = i;
      state.workName = j;
      state.motif = k;
      proxy.$nextTick(() => {
        proxy.$refs.filiateGraph.getJsonData();
      });
    };
    //保存
    const onSave = () => {
      proxy.$nextTick(() => {
        proxy.$refs.filiateGraph.save();
      });
    };
    //获取当前选中节点作业状态
    const getState = (i) => {
      state.releaseState = i;
    };
    //上下线
    const onLine = () => {
      let releaseState = "";
      if (route.query.releaseState) {
        releaseState = proxy.$route.query.releaseState;
      } else {
        releaseState = state.releaseState;
      }
      let status = "";
      if (releaseState == "OFFLINE") {
        status = "ONLINE";
      } else if (releaseState == "ONLINE") {
        status = "OFFLINE";
      }
      //proxy.$axios.post(`/dolphinscheduler-api/dolphinscheduler/projects/process-definition/release/${state.code}`,{
      //   code: state.code,
      //   projectCode: state.projectCode,
      //   releaseState: status,
      // })
      // .then((res) => {
      //   let resq = res.data
      //   if(resq.code == 200){
      //     ElMessage.success('修改状态成功')
      //   }else if(resq.code == 400){
      //     ElMessageBox.alert(resq.msg, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //     .catch(() => {})
      //   }else{
      //     ElMessage.error(resq.msg)
      //   }
      // });
    };
    //前往监控
    const onMonitior = () => {
      if (state.projectCode === 0) {
        router.push({
          path: "workMonitor",
          query: { projectCode: state.code, code: null, motif: state.motif },
        });
      } else if (state.code && state.projectCode) {
        router.push({
          path: "workMonitor",
          query: {
            projectCode: state.projectCode,
            code: state.code,
            name: state.workName,
            motif: state.motif,
          },
        });
      } else {
        ElMessage.warning("请先选择左侧作业树节点");
      }
    };
    //立即执行
    const onCommitConfig = () => {
      //proxy.$axios.post('/dolphinscheduler-api/dolphinscheduler/projects/executors/start-process-instance', {
      //   projectCode: state.projectCode,
      //   processDefinitionCode: state.code,
      // }).then(({data}) => {
      //   ElMessage[data.code === 200 ? 'success': 'error'](data.msg)
      // })
    };
    //定时管理
    const onSetTime = () => {
      state.visible = state.projectCode ? true : false;
    };
    //关闭弹框
    const closeModal = () => {
      state.visible = false;
      // getData()
    };
    //作业监控编辑跳转
    const getWorkEdit = () => {
      state.workCode = proxy.$route.query.code;
      state.workProjectCode = proxy.$route.query.projectCode;
      state.workMonitorName = proxy.$route.query.name;
    };
    onMounted(() => {
      getState();
    });
    return {
      state,
      getCode,
      onSave,
      onLine,
      onMonitior,
      onCommitConfig,
      onSetTime,
      closeModal,
      getWorkEdit,
      getState,
      getChangeShowFlag,
      treeRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.sub-right-container {
  padding: 10px;
  margin: 10px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  height: 90vh;
}
.title {
  height: 16px;
  width: 100px;
}
.top {
  padding-top: 10px;
  justify-content: space-evenly;
  width: 60%;
  height: 43px;
  div {
    i {
      cursor: pointer;
    }
    span {
      cursor: pointer;
      font-size: 15px;
    }
  }
}
</style>
